<template>
  <div class="search-wrap">
    <div
      class="header"
      :class="{ 'header--fixed': 'showHistory' }"
      :style="
        !isShowDropdownMenu &&
        isSearchSuggestWhitePerson &&
        searchSuggestList.length
          ? 'background: #fff;overflow: hidden; height: 100vh;'
          : ''
      "
    >
      <div class="header-top">
        <div class="header-top-inner__wrap">
          <form action="/" style="width:100%;">
            <van-search
              v-model.trim="keyWord"
              :placeholder="placeholderText"
              show-action
              class="pt3"
              @search="search"
              @focus="triggerFocus"
              @blur="triggerBlur"
              @clear="clearHandle"
              @input="inputHandle"
            >
              <div slot="action" @click.stop="search">
                搜索
              </div>
            </van-search>
          </form>
        </div>

        <!-- 筛选 -->
        <!-- :categoryListArr="categoryListArr" 品类暂时去掉 -->
        <div
          v-if="isShowDropdownMenu"
          ref="SortComponentWrap"
          class="header-DropdownMenu__wrap"
          :class="{ 'DropdownMenu--fixed': isFixed }"
        >
          <DropdownMenu
            :isFixed="isFixed"
            :optionsArr="optionsArr"
            :brandNameListArr="brandNameListArr"
            :forecastArr="forecastArr"
            @getSort="clickHandle"
            @setCheckboxActive="setCheckboxActiveHandle"
            @resetActive="resetActiveHandle"
            @resetFilterPanel="resetFilterPanelHandle"
            @confirm="confirmHandle"
            @closeScreen="setCloseScreen"
            @updateBrandList="updateBrandListHandle"
          />
        </div>
      </div>
      <!--搜索联想词列表 -->
      <div
        v-if="
          !isShowDropdownMenu &&
            isSearchSuggestWhitePerson &&
            searchSuggestList.length
        "
        class="search_suggestList_all"
      >
        <ul>
          <li
            v-for="(item, index) in searchSuggestList"
            :key="index"
            @click.stop="searchSuggestSingleHandle(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <!--搜索联想词列表 end-->

      <!-- 历史搜索 -->
      <div v-if="searchHistory.length && showHistory" class="header-bottom">
        <div class="tips">
          <span>搜索历史</span>
          <i class="icon-delete" @click="clearSearchHistory"></i>
        </div>
        <div class="history-label-wrap ellipsis" :class="{ expand: isExpand }">
          <div ref="searchHistoryListDom" class="history">
            <p
              v-for="(item, i) in searchHistory"
              :key="i"
              class="tag-mark-sty"
              @click="handleSearchHistory(item)"
            >
              {{ item | cropText }}
            </p>
          </div>
          <div v-if="searchHistoryListHeight > 86" class="expand-wrap">
            <p class="tag-mark-sty" @click.stop="handleExpand">
              <van-icon
                :name="isExpand ? 'arrow-up' : 'arrow-down'"
                color="#999"
                size="0.26rem"
              />
            </p>
          </div>
        </div>
      </div>
      <!-- 搜索发现 -->
      <div
        v-if="hotKeysList.length && showHistory && shouldShow"
        class="all-search-box"
      >
        <div class="tips">
          <span>搜索发现</span>
        </div>
        <div class="all-search-list">
          <div
            v-for="(item, key) in hotKeysList"
            :key="key"
            class="search-item-col"
          >
            <div
              v-if="item.type === 1"
              class="red_envelopes"
              @click="toShareRedEnvelopes()"
            >
              <i class="icon_red_envelopes"></i>转发得红包
            </div>
            <div v-else @click="toNext(item)">
              {{ item.hotName }}
            </div>
          </div>
        </div>
      </div>

      <!-- 大家都在买 推荐位 -->
      <div v-if="showHistory">大家都在买 推荐位</div>
    </div>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    </van-pull-refresh>
  </div>
</template>

<script>
import { throttle } from 'lodash';
import { formatImgUrl, getScrollY } from '@/utils/util';
import DropdownMenu from './components/DropdownMenu.vue';
import {
  userInfo,
  searchSuggestList,
  searchFilterData,
  hotKeysList
} from './json/index';

const delay = (function() {
  let timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();

export default {
  name: 'search',
  components: {
    DropdownMenu
  },
  data() {
    return {
      hotKeysList,
      isExpand: false,
      searchHistoryListHeight: 0,
      fromPage: 'search',
      isLoading: false,
      keyWord: '',

      loading: false, // 是否处于加载状态，加载过程中不触发load事件
      finished: false, // 是否已加载完成，加载完成后不再触发load事件
      isFire: false, // 方法是否阻塞
      immediateCheck: false, // 是否在初始化时立即执行滚动位置检查

      searchHistory: [],
      isClient: true, // C端用户
      showHistory: true, // 是否展示最近搜索
      placeholderText: '搜索商品款号、序号、关键字',
      defaultPlaceHolder: '搜索商品款号、序号、关键字',
      optionsArr: [
        // {
        //   text: '综合',
        //   value: '1',
        //   arrowType: 0,
        //   isActive: true
        // },
        {
          text: '综合',
          value: '1',
          arrowType: 1,
          isActive: false,
          selectArr: [
            {
              text: '综合排序',
              value: 1,
              isActive: false
            },
            {
              text: '转发从高到低',
              value: 2,
              isActive: false
            },
            {
              text: '折扣从高到低',
              value: 3,
              isActive: false
            }
          ],
          showSelect: false
        },
        {
          text: '上新',
          value: '3',
          arrowType: 2,
          isActive: false,
          sortRule: null
        },
        {
          text: '价格',
          value: '2',
          arrowType: 2,
          isActive: false,
          sortRule: null
        },
        {
          text: '筛选',
          value: '6',
          arrowType: 3
        }
      ],
      DropDownMenuObj: {
        sortedModel: 1, // 排序方式（1：综合、2: 价格、3：上新、5：活动、6：筛选）
        sortedType: '2' // 1：正序 2：倒序（默认2）
      },
      brandNameListArr: [],
      categoryListArr: [],
      forecastArr: [],
      isShowDropdownMenu: false,
      SortComponentWrapTop: 0, // getBoundingClientRect() 获取 top 作为页面滚动时[排序筛选]组件是否吸顶的基准值;
      isFixed: false,
      userInfo: {},

      isSearchSuggestWhitePerson: false, // 默认不是白名单
      searchSuggestList: [], // 搜索提示词列表

      inFocus: false,
      filterBrandNames: [], // 筛选品牌
      tabName: '综合',
      productTypeModel: 3,
      activitySwitch: false
    };
  },
  computed: {
    searchText() {
      let newKeyWord = this.keyWord || '';
      if (newKeyWord && newKeyWord.length > 10) {
        newKeyWord = `${newKeyWord.slice(0, 10)}...`;
      }
      return newKeyWord;
    },
    brandNameList_active() {
      return this.brandNameListArr
        .filter(item => item.isActive)
        .map(item => item.name);
    },
    categoryNameList_active() {
      return this.categoryListArr
        .filter(item => item.isActive)
        .map(item => item.name);
    },
    shouldShow() {
      if (this.activitySwitch) {
        return this.$route.query.from !== 'brand';
      }
      return true;
    }
  },
  filters: {
    cropText(text) {
      let newVal = text;
      if (text.length > 20) {
        newVal = `${text.slice(0, 20)}...`;
      }
      return newVal;
    }
  },
  methods: {
    computeSearchHistoryHeight() {
      this.$nextTick(() => {
        let searchHistoryListDom = this.$refs.searchHistoryListDom;
        if (searchHistoryListDom) {
          this.searchHistoryListHeight = searchHistoryListDom.scrollHeight;
        }
      });
    },
    handleExpand() {
      this.isExpand = !this.isExpand;
    },
    getUserInfo() {
      this.userInfo = userInfo.data;
      this.isClient = true;
    },
    onRefresh() {
      this.initStatus();
      this.isLoading = true;
      this.callFilterSearch();
    },
    // 选中联想词 输入框展示 选中的联想词
    searchSuggestSingleHandle(val) {
      console.log('联想词', val, '搜索词：', this.keyWord);
      this.keyWord = val;
      // this.isShowSearchSuggest = false; // 搜索联想词 隐藏
      this.searchSuggestList = [];
      this.search();
    },
    search() {
      this.searchSuggestList = [];
      // 如果 keyWord 不存在 && placeholder不等于默认, 则使用placeholder覆盖keyWord
      if (!this.keyWord && this.placeholderText !== this.defaultPlaceHolder) {
        this.keyWord = this.placeholderText;
      }
      if (this.keyWord) {
        this.isShowDropdownMenu = true;
        this.$nextTick(() => {
          this.getBoundingClientRectY();
        });

        this.showHistory = false;
        this.brandNameListArr = [];
        this.categoryListArr = [];
        this.forecastArr = [];
        this.filterBrandNames = [];
        this.productTypeModel = 3;
        this.initStatus();
        this.DropDownMenuObj = {
          sortedModel: 1,
          sortedType: '2'
        };
        this.callFilterSearch();
        this.getFilterBoardHandle();
      }
    },
    handleSearchHistory(item) {
      this.keyWord = item;
      this.search();
    },
    // 初始化数据
    initStatus() {
      this.pageNum = 1;
      this.productPage = [];
      this.activityList = [];
      this.recommendActivityList = [];
      this.total = 0;
      this.loading = false;
      this.isFire = false;
      this.finished = false;
    },
    onLoad() {
      this.callFilterSearch();
    },
    clearSearchHistory() {
      if (this.$refs.confirmDialogRef) {
        this.$refs.confirmDialogRef.showDialog = true;
      }
    },
    confirmClearData() {
      if (this.$refs.confirmDialogRef) {
        this.$refs.confirmDialogRef.showDialog = false;
      }
      this.searchHistory = [];
      localStorage.setItem('searchHistory', null);
      this.searchHistoryListHeight = 0;
    },
    getSearchHistory() {
      const searchHistoryStr = localStorage.getItem('searchHistory');
      let searchHistory = '';
      if (searchHistoryStr) {
        searchHistory = JSON.parse(searchHistoryStr);
      }
      if (searchHistory && searchHistory.length) {
        this.searchHistory = searchHistory;
      }
      this.computeSearchHistoryHeight();
    },
    triggerBlur() {
      this.inFocus = false;
    },
    triggerFocus() {
      if (this.keyWord && this.isSearchSuggestWhitePerson) {
        console.log(' have 9999 focus', this.keyWord);
        this.inputHandle();
        // this.searchSuggestHandle(); // 有值 和 输入有值一样; 调用白名单及搜索提示词列表
      }
      this.inFocus = true;
      this.isShowDropdownMenu = false;
      this.showHistory = true;
      this.initStatus();
      this.computeSearchHistoryHeight();
    },
    toNext(item) {
      if (item && item.hotLink) {
        this.$router.push({
          path: item.hotLink
        });
      } else {
        this.handleSearchHistory(item.hotName);
      }
    },
    clickHandle(obj) {
      this.optionsArr.forEach(item => {
        item.isActive = item.value === obj.value;
        if (item.value === obj.value && item.arrowType === 2) {
          item.sortRule = obj.sortRule ? (obj.sortRule === 1 ? 2 : 1) : 1;
        }
        if (item.value === obj.value && item.arrowType === 1) {
          item.showSelect = !item.showSelect;
        }
        if (obj.arrowType !== 1 && item.arrowType === 1) {
          item.showSelect = false;
          item.selectArr.forEach(it => {
            it.isActive = false;
          });
        }
      });
      console.log('this.optionsArr===', this.optionsArr);
      this.DropDownMenuObj = {
        sortedModel: obj.sortedModel || obj.value,
        sortRule: obj.sortRule ? (obj.sortRule === 1 ? 2 : 1) : 1
      };
      // this.initStatus();
      // this.callFilterSearch();
    },
    /**
     * 获取[筛选]面板数据
     * params: {
     *    keyword 搜索关键字
     *    pageNum 固定传 1 (后端梁丰年-用于后端Body校验)
     *    pageSize 固定传 10 (后端梁丰年-用于后端Body校验)
     * }
     */
    getFilterBoardHandle() {
      const { brandNameList, categoryList, forecast } = searchFilterData.data;
      if (brandNameList.length) {
        this.brandNameListArr = brandNameList.map(item => ({
          name: item,
          isActive: false
        }));
      }
      if (categoryList.length) {
        this.categoryListArr = categoryList.map(item => ({
          name: item,
          isActive: false
        }));
      }
      if (forecast.length) {
        this.forecastArr = forecast.map(item => ({
          name: item.name,
          type: item.type,
          sort: item.sort,
          isActive: false
        }));
      }
    },
    // 更新品牌
    updateBrandListHandle() {
      const { brandNameList } = searchFilterData.data;
      if (brandNameList.length) {
        this.brandNameListArr = brandNameList.map(item => ({
          name: item,
          isActive: false
        }));
      }
    },

    callFilterSearch() {
      console.log('开始执行搜索！', this.keyWord, this.finished, this.isFire);
      /**
       * 1. 关键字为空不搜索
       * 2. 判断是否全部加载完成
       * 3. 判断异步方法是否在执行(true:在执行; false:未执行;)
       */
      if (!this.keyWord || this.finished || this.isFire) {
        this.loading = false;
        return;
      }
      this.isFire = true;
      this.loading = true;

      // 存到本地
      const hasSH = this.searchHistory.some(i => i === this.keyWord);
      if (!hasSH) {
        this.searchHistory.unshift(this.keyWord);
        // 最多30个
        this.searchHistory = this.searchHistory.slice(0, 30);
        localStorage.setItem(
          'searchHistory',
          JSON.stringify(this.searchHistory)
        );
      }

      this.showHistory = false;

      console.log('开始执行搜索！2');
      // const params = {
      //   keyword: this.keyWord, // 搜索关键字
      //   brandName: this.filterBrandNames, // 品牌筛选
      //   category: this.categoryNameList_active, // 品类筛选
      //   pageNum: this.pageNum, // 当前页
      //   pageSize: this.pageSize, // 每页大小
      //   sortedModel: this.DropDownMenuObj.sortedModel, // 排序方式（1：综合、3：上新、5：品牌）
      //   sortedType: this.DropDownMenuObj.sortedType, // 1：正序 2：倒序（默认2）
      //   activityNo: '', // 活动No
      //   productTypeModel: Array.isArray(this.productTypeModel)
      //     ? this.productTypeModel[0]
      //     : this.productTypeModel // 商品状态 1：预告  2：直播  3：预告+直播  null：直播
      // };
    },
    setCloseScreen(list) {
      console.log('setCloseScreen==list==', list);
      this.filterBrandNames = list
        .filter(item => item.isActive)
        .map(item => item.name);
    },
    // 筛选面板标签选择
    setCheckboxActiveHandle(list, forecastList) {
      console.log('setCheckboxActiveHandle=====');
      this.filterBrandNames = list
        .filter(item => item.isActive)
        .map(item => item.name);
      this.productTypeModel = forecastList
        .filter(item => item.isActive)
        .map(item => item.type);
      this.finished = false;
      // 请求total数量
      this.pageNum = 1;
      this.callFilterSearch('', false); // 也不赋值搜索后的数据
    },
    // 筛选面板重置按钮，请求total
    resetActiveHandle() {
      this.filterBrandNames = [];
      this.productTypeModel = 3;
      this.finished = false;
      // 请求total数量
      this.pageNum = 1;
      this.callFilterSearch('', false); // 也不赋值搜索后的数据
    },
    resetFilterPanelHandle() {
      this.filterBrandNames = [];
      this.optionsArr[this.optionsArr.length - 1].isActive = false;
    },
    // 筛选面板确定按钮，发起请求
    confirmHandle(selectedList, forecastList) {
      this.brandNameListArr = selectedList;
      this.filterBrandNames = selectedList
        .filter(item => item.isActive)
        .map(item => item.name);
      this.forecastArr = forecastList;
      this.productTypeModel = forecastList
        .filter(item => item.isActive)
        .map(item => item.type);

      const bool =
        selectedList.some(item => item.isActive) ||
        forecastList.some(item => item.isActive);

      console.log('confirmHandle===bool===', bool);
      this.optionsArr[this.optionsArr.length - 1].isActive = bool;
      this.finished = false;
      this.initStatus();
      this.callFilterSearch();
    },
    // 筛选-综合
    comprehensiveHandle(data = {}, ubtSpm, isSearchData) {
      const {
        productList = {}, // 搜商品-返回的分页列表
        recommendActivityList = [] // 搜不到时-推荐活动列表
      } = data;
      this.total = productList.total || 0;
      if (!isSearchData) {
        // 判断是否还有下一页
        if (productList.hasNextPage) {
          this.pageNum = productList.currentPage + 1;
        } else {
          this.finished = true;
        }
        return;
      }
      // 拿到返回数据，进行二次处理
      if (productList.data && productList.data.length) {
        productList.data.forEach(i => {
          const pictureUrls = (i.pictureUrls && i.pictureUrls.split(',')) || [];
          i.brandLogoUrl = formatImgUrl(i.brandLogoUrl, 40, 40);
          // eslint-disable-next-line no-param-reassign
          i.pictureUrls = pictureUrls.map(img => img);
          // eslint-disable-next-line no-param-reassign
          i.pictureUrlsPreview = pictureUrls.map(img =>
            formatImgUrl(img, 375, 375)
          );
          i.presale = i.activityPresale;
        });
      }
      // 判断是否首页数据
      if (this.productPage.length) {
        this.productPage = this.productPage.concat(productList.data || []);
      } else {
        this.productPage = productList.data || [];
      }
      // 判断是否还有下一页
      if (productList.hasNextPage) {
        this.pageNum = productList.currentPage + 1;
      } else {
        this.finished = true;
      }
      // 商品数组为空，展示推荐活动
      if (!this.productPage.length) {
        this.recommendActivityList = recommendActivityList;
      }
    },
    // 品牌处理
    brandHandle(data = {}) {
      const {
        activityList = {}, // 搜活动-返回的分页列表
        recommendActivityList = [] // 搜不到时-推荐活动列表
      } = data;
      // 判断是否首页数据
      if (this.activityList.length) {
        this.activityList = this.activityList.concat(activityList.data || []);
      } else {
        this.activityList = activityList.data || [];
      }
      // 判断是否还有下一页
      if (activityList.hasNextPage) {
        this.pageNum = activityList.currentPage + 1;
      } else {
        console.log('活动加载完成！');
        this.finished = true;
      }
      // 活动列表为空，展示推荐活动
      if (!this.activityList.length) {
        this.recommendActivityList = recommendActivityList;
      }
    },
    clearHandle() {
      this.searchSuggestList = []; // 搜索提示词列表 为空
    },
    toShareRedEnvelopes() {
      this.$router.push({
        path: 'open-envelopes'
      });
    },
    scrollHandle() {
      if (getScrollY() > this.SortComponentWrapTop) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
    /**
     * getBoundingClientRect() 获取 top 作为页面滚动时[排序筛选]组件是否吸顶的基准值;
     */
    getBoundingClientRectY() {
      const { SortComponentWrap } = this.$refs;
      if (SortComponentWrap) {
        const { top } = SortComponentWrap.getBoundingClientRect();
        if (top) {
          this.SortComponentWrapTop = parseInt(top, 10);
        }
      }
    },

    // 输入内容变化时触发
    inputHandle() {
      if (this.isSearchSuggestWhitePerson) {
        delay(() => {
          this.searchSuggestHandle();
        }, 400);
      }
    },

    // 搜索提示词接口
    searchSuggestHandle() {
      console.log(this.keyWord);
      this.searchSuggestList = searchSuggestList || [];
    },
    checkHotKey() {
      const { hotKey } = this.$route.query;
      if (hotKey) {
        this.placeholderText = hotKey;
      }
    }
  },
  created() {
    this.getSearchHistory();
    this.getUserInfo();
    this.checkHotKey();
    this.throttle = throttle(this.scrollHandle, 200);
    window.addEventListener('scroll', this.throttle);
  },
  activated() {},
  beforeDestroy() {
    window.removeEventListener('scroll', this.throttle);
  },
  beforeRouteLeave(to, from, next) {
    switch (to.name) {
      case 'productDetail':
      case 'brand':
      case 'img-search':
      case 'login_web':
        from.meta.keepAlive = true;
        break;
      default:
        from.meta.keepAlive = false;
    }
    next();
  }
};
</script>

<style lang="scss">
.search-wrap {
  .van-list__finished-text {
    width: 100%;
    text-align: center;
  }
  .van-search__content {
    padding: 0;
    background-color: #fff;
    border-radius: 19px;
    box-sizing: border-box;
    border: 1.5px solid #ff1010;
    overflow: hidden;
  }
  .van-tab {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }
  .van-tab.van-tab--active {
    color: #e62525;
  }

  .van-search {
    border-radius: 0px 0px 12px 12px;
    background: #fff !important;
    padding-top: 10px !important;
    padding-left: 10px !important;
    padding-bottom: 10px !important;
  }
  .van-search .van-cell {
    background-color: #fff;
    border-radius: 16px;
    padding-top: 5.5px !important;
    padding-bottom: 5.5px !important;
    padding-right: 12px !important;
  }
  .van-search__content .van-field__left-icon {
    padding-left: 10px;
  }
  .van-search__action {
    color: #333333;
    padding: 0 12px 0 16px;
    font-size: 13px;
    line-height: 18px;
  }
  .van-icon-search::before {
    display: none !important;
  }
  .van-search__content .van-field__left-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 13px;
  }
  .van-search__content .van-icon-search {
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: 100% 100%;
    background-image: url('./images/search/icon-search-red@2x.png');
  }
  .van-field__control::-webkit-input-placeholder {
    color: #999;
  }
  .van-field__control {
    caret-color: #ff1010;
    font-size: 12px;
    line-height: 18px;
    padding-right: 10px;
    width: 92%;
  }
  .van-field__clear {
    font-size: 18px;
    line-height: 18px;
    padding-left: 0;
    padding-right: 10px;
  }
}
</style>

<style lang="scss" scoped>
.icon-camera {
  width: 20px;
  height: 31px;
  display: inline-block;
  background: url('./images/search/icon-camera2@2x.png') center 8px no-repeat;
  background-size: 20px 20px;
}
//搜索联想词
.search_suggestList_all {
  width: 100%;
  height: 100vh;
  z-index: 22;
  background: #ffffff;
  box-sizing: border-box;
  ul {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    li:last-child {
      border-bottom: none;
    }
    li {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 36px;
      border-bottom: 1px solid #f5f5f5;
      box-sizing: border-box;
    }
  }
}

.search-wrap {
  min-height: 100vh;
  background-color: #f5f5f5;
  .header {
    background-color: #f5f5f5;
    .header-top {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      /*border-radius: 0px 0px 12px 12px;*/
      background: #fff;
      .header-top-inner__wrap {
        width: 100%;
        position: relative;
        .img_search_upoload--wrap {
          width: 20px;
          height: 20px;
          position: absolute;
          right: 66px;
          top: 7px;
        }
      }
      .header-DropdownMenu__wrap {
        margin-top: 5px;
        width: 100%;
        width: 100%;
        // z-index: 99;
      }
      .header-DropdownMenu__wrap {
        margin-top: 5px;
        width: 100%;
        // height: 45px;
        // border-radius: 10px 10px 0px 0px;
      }

      .DropdownMenu--fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2000;
      }
    }

    .header-bottom {
      background-color: #fff;
      .tips {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px 10px 10px;
        font-size: 14px;
        line-height: 20px;
        font-family: PingFangSC-Medium;
        .icon-delete {
          width: 16px;
          height: 16px;
          background-size: 100% 100%;
          background-image: url('./images/search/icon-delete@2x.png');
        }
      }
      .history-label-wrap {
        display: flex;
        padding-left: 10px;
        max-height: 76px;
        &.ellipsis {
          overflow: hidden;
        }
        &.expand {
          overflow: visible;
          max-height: none;
        }
      }
      .history {
        font-size: 13px;
        flex: 1;
        display: flex;
        flex-wrap: wrap;
      }
      .tag-mark-sty {
        display: flex;
        align-items: center;
        margin: 0 8px 8px 0;
        padding: 0 12px;
        height: 30px;
        line-height: normal;
        max-width: 283px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: #f6f6f6;
        border-radius: 16px;
        color: #333;
      }
    }
    .expand-wrap {
      display: flex;
      align-items: flex-end;
      margin-right: 2px;
    }
    .all-search-box {
      background-color: #fff;
      padding-top: 12px;
      &.add-border-radius {
        margin-top: 10px;
      }
      .tips {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        font-size: 14px;
        font-family: PingFangSC-Medium;
        .icon-eye {
          width: 13px;
          height: 10px;
          background-size: 100% 100%;
        }
        .icon-eye-open {
          background-image: url('./images/search/icon_eye_open.png');
        }
        .icon-eye-close {
          width: 14px;
          height: 5px;
          background-image: url('./images/search/icon_eye_close.png');
        }
      }
      .all-search-list {
        font-size: 12px;
        line-height: 18px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 10px 10px 0px;
        font-size: 13px;
        line-height: 18px;
        .search-item-col {
          display: inline-block;
          margin: 0 8px 8px 0;
          padding: 6px 12px;
          max-width: 320px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 18px;
          background-color: #f6f6f6;
          border-radius: 16px;
          color: #333;
          text-align: center;
          .red_envelopes {
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            color: #333;
            background: rgba(245, 245, 245, 1);
            border-radius: 15px;
            .icon_red_envelopes {
              display: inline-block;
              width: 16px;
              height: 16px;
              margin-right: 4px;
              background: url('./images/search/icon_red_envelopes.png');
              background-size: 100% 100%;
            }
          }
        }
      }
      .hotkeys-hide {
        padding: 30px 0;
        font-size: 12px;
        color: #999;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        &::before {
          display: block;
          content: '';
          width: 35px;
          height: 1px;
          background: #ccc;
          margin-right: 8px;
          transform: scaleY(0.5);
          transform-origin: 0 0;
        }
        &::after {
          display: block;
          content: '';
          width: 35px;
          height: 1px;
          background: #ccc;
          margin-left: 8px;
          transform: scaleY(0.5);
          transform-origin: 0 0;
        }
      }
    }

    .empty {
      padding: 13px 10px 11px;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;

      img {
        width: 60px;
        height: 50px;
        margin-right: 8px;
      }

      p {
        font-size: 13px;
        color: #333;
        text-align: left;
        font-family: PingFangSC-Regular;
      }
    }
  }

  .search__list {
    // background-color: #fff;
    .list--product {
      margin-top: -11px;
      padding: 0 15px;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      background: #f5f5f5 url('./images/search/bg-search-linear.png') no-repeat;
      background-size: 375px 168px;
    }
    .list--activity {
      padding-top: 5px;
    }
  }

  .activity-box {
    background: #f5f5f5;
  }
}
</style>
